<template>
  <!-- <el-date-picker
                  v-model="form.year"
                  type="year"
                  format="yyyy"
                  value-format="yyyy"
                  placeholder="选择年">
                </el-date-picker> -->
                <!-- 
                  class="year-picker"
      @change="changeStartYear"
      format="yyyy"
      value-format="yyyy"
                 -->
  <div class="year-range-picker">
    <el-date-picker
      v-model="startYear"
      type="year"
      placeholder="选择开始年"
      class="year-picker"
      @change="changeStartYear"
      format="yyyy"
      value-format="yyyy"
    >
    </el-date-picker>
    <span class="range-word"> 至 </span>
    <el-date-picker
      v-model="endYear"
      type="year"
      placeholder="选择结束年"
      class="year-picker"
      @change="changeEndYear"
      format="yyyy"
      value-format="yyyy"
    >
    </el-date-picker>
  </div>
</template>

<script>
export default {
  name: "YearRangePicker",
  // 接收父组件传入的数据
  props: {
    yearRange: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      startYear: undefined,
      endYear: undefined,
    };
  },
  mounted() {
    // 初始化自身变量
    // console.log('this.yearRange=', this.yearRange.length);
    if (this.yearRange && this.yearRange.length == 2) {
      if (isNaN(this.yearRange[0])) {
        this.startYear = undefined;
      } else {
        this.startYear = String(this.yearRange[0]);
      }
      if (isNaN(this.yearRange[1])) {
        this.endYear = undefined;
      } else {
        this.endYear = String(this.yearRange[1]);
      }
      // this.startYear = String(this.yearRange[0]);
      // this.endYear = String(this.yearRange[1]);
    }
    // if (this.yearRange == undefined || this.yearRange == null || this.yearRange == '') {
    //   this.startYear = undefined;
    //   this.endYear = undefined;
    // } else if (this.yearRange && this.yearRange.length != 2) {

    // }
    // this.startYear = String(this.yearRange[0]);
    // this.endYear = String(this.yearRange[1]);
  },
  methods: {
    changeStartYear(val) {
      // console.log('开始=', val, 'start=', this.startYear, ';endyear=', this.endYear);
      if (Number(this.startYear) > 0 && Number(this.endYear) && Number(this.startYear) > Number(this.endYear)) {
        this.$modal.msgWarning('开始年份必须小于结束年份！');
      }
      // if (val == undefined) {
        
      // } else if (this.startYear == undefined || this.endYear == undefined) {

      // } else if (Number(this.startYear) > Number(this.endYear)) {
      //   // 开始年份大于结束年份，调换
      //   this.startYear = this.endYear;
      //   this.endYear = val;
      // }
      // 将改动传回父组件
      this.$emit("yearChanged", [this.startYear, this.endYear]);
    },
    changeEndYear(val) {
      // console.log('结束=', val, 'start=', this.startYear, ';endyear=', this.endYear);
      if (Number(this.startYear) > 0 && Number(this.endYear) && Number(this.startYear) > Number(this.endYear)) {
        this.$modal.msgWarning('开始年份必须小于结束年份！');
      }
      // if (val == undefined) {
      //   // this.endYear = 
      // } else if (this.startYear == undefined || this.endYear == undefined) {

      // } else if (Number(this.startYear) > Number(this.endYear)) {
      //   this.endYear = this.startYear;
      //   this.startYear = val;
      // }
      this.$emit("yearChanged", [this.startYear, this.endYear])
    },
  },
};
</script>

<style scoped lang="scss">
.year-range-picker {
  display: flex;
  color: black;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  .year-picker {
    max-width: 133px;
  }
  .range-word {
    margin-left: 8px;
    margin-right: 8px;
    // font-size: 12px;
  }
}
</style>